.list-item-insertion-overlay {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.list-insertion-point {
  position: absolute;
  left: 0;
  right: 0;
  height: 15px;

  &.top {
    top: 0;
  }

  &.bottom {
    bottom: 0;
  }
}

.list-item-insertion-indicator {
  pointer-events: none;
  position: absolute;
  z-index: 1;

  &.darwin-line {
    left: 10px;
    right: 0;
    height: 2px;
    background-color: var(--focus-color);

    &.top {
      top: -1px;
    }
    &.bottom {
      bottom: -1px;
    }
  }

  &.darwin-circle {
    left: 0;
    width: 10px;
    height: 10px;
    border-color: var(--focus-color);
    border-radius: 50%;
    border-style: solid;
    border-width: 2px;

    &.top {
      top: -5px;
    }
    &.bottom {
      bottom: -5px;
    }
  }
}
